/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/02
 *@description  divider  component   分割线组件
 */
/**
 * #item
 *
 * @type        aty-divider
 * @cn          分割线
 * @menu        工具
 * @stPlugin    true
 * @stContainer false
 */
import config from '../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-divider'
// module
const module = {
  name: prefixCls,
  props: {
    /**
     * #property
     *
     * @name    marginTopLeft
     * @cn      上边距||左边距
     * @type    string,number
     * @description 分割线与前一个元素的边距（上边距||左边距,不带单位的情况默认为px）
     */
    marginTopLeft: {
      type: [Number, String]
    },
    /**
     * #property
     *
     * @name    marginBottomRight
     * @cn      下边距||右边距
     * @type    string,number
     * @description 分割线与后一个元素的边距（下边距||右边距，不带单位的情况默认为px）
     */
    marginBottomRight: {
      type: [Number, String]
    },
    /**
     * #property
     *
     * @name    height
     * @cn      分割线的高
     * @type    string,number
     * @description 分割线的高
     */
    height: {
      type: [Number, String]
    },
    /**
     * #property
     *
     * @name    width
     * @cn      分割线的宽
     * @type    string,number
     * @description 分割线的宽
     */
    width: {
      type: [Number, String]
    },
    /**
     * #property
     *
     * @name    color
     * @cn      分割线的颜色
     * @type    string
     * @description 分割线的颜色
     */
    color: {
      type: String
    },
    /**
     * #property
     *
     * @name    type
     * @cn      分割线的类型
     * @type    list
     * @options [horizontal,vertical]
     * @value   horizontal
     * @description 水平还是垂直类型，取值为['horizontal', 'vertical']中的一个
     */
    type: {
      type: String,
      default: 'horizontal',
      validator(value) {
        return Artery.isOneOf(value, ['horizontal', 'vertical'])
      }
    },
    /**
     * #property
     *
     * @name    orientation
     * @cn      分割线标题的位置
     * @type    list
     * @options [left,right,center]
     * @value   center
     * @description 分割线标题的位置，取值为[left, right, center]中的一个
     */
    orientation: {
      type: String,
      default: 'center',
      validator(value) {
        return Artery.isOneOf(value, ['left', 'right', 'center']);
      }
    },
    /**
     * #property
     *
     * @name    dashed
     * @cn      是否虚线
     * @type    boolean
     * @value   false
     * @description 是否为虚线，默认为false
     */
    dashed: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      scope: {
        className: prefixCls
      }
    }
  },
  computed: {
    hasSlot() {
      return !!this.$slots.default
    },
    // 下拉框容器的类名
    classes() {
      return [
        `${prefixCls}`,
        `${prefixCls}-${this.type}`,
        {
          [`${prefixCls}-dashed`]: !!this.dashed
        }
      ]
    },
    slotClasses() {
      return [
        `${prefixCls}-inner-text`,
        {
          [`${prefixCls}-with-text`]: this.hasSlot && this.orientation === 'center',
          [`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot,
        }
      ];
    },
    styles() {
      const _style = {}
      const _marginTopLeft = this.marginTopLeft ? (Artery.type(this.marginTopLeft) == 'number' ? this.marginTopLeft + 'px' : this.marginTopLeft) : false
      const _marginBottomRight = this.marginBottomRight ? (Artery.type(this.marginBottomRight) == 'number' ? this.marginBottomRight + 'px' : this.marginBottomRight) : false
      const _height = this.height ? (Artery.type(this.height) == 'number' ? this.height + 'px' : this.height) : false
      const _width = this.width ? (Artery.type(this.width) == 'number' ? this.width + 'px' : this.width) : false
      const _color = this.color ? this.color : false
      const _dashed = this.dashed
      if (_marginTopLeft) {
        if (this.type && this.type == 'vertical') {
          _style.marginLeft = _marginTopLeft
        } else {
          _style.marginTop = _marginTopLeft
        }
      }
      if (_marginBottomRight) {
        if (this.type && this.type == 'vertical') {
          _style.marginRight = _marginBottomRight
        } else {
          _style.marginBottom = _marginBottomRight
        }
      }
      if (_height) {
        _style.height = _height
      }
      if (_width) {
        _style.width = _width
      }
      if (_color) {
        // 当分割线为虚线时，需要设置边界线的颜色
        if (!_dashed) {
          _style.backgroundColor = _color
        } else {
          _style.borderColor = _color
        }
      }
      return _style
    }
  }
}
export default module
